<template>
  <div class="page roadIn">
    <sysHeader :active="'1'"></sysHeader>
    <sysMap
      :markers="markers"
      :lines="lineData"
      :points="points"
      ref="sysMap"
      @clickLineHandel="clickLineHandel"
      @changeCenter="changeCenter"
      @getEmployeeLine="getLinePoints"
    ></sysMap>
    <!-- 左侧头部 -->
    <div class="roadIn_l_t" :class="moveFlag?'goleft':'backleft'">
      <div class="roadIn_l_t_header" @click="clickTitle(1)">全市四类道路汇总信息</div>
      <div class="roadIn_l_t_box">
        <el-row>
          <el-col :span="6">
            <div class="tongji_item" @click="getMapLine(1)">
              <div class="tongji_item_num" style="color:#81FF5D;">
                <DigitRoll :rollDigits="tongji.zt" />
              </div>
              <div class="tongji_item_name">准停</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="tongji_item" @click="getMapLine(2)">
              <div class="tongji_item_num" style="color:#FF6F6F;">
                <DigitRoll :rollDigits="tongji.jt" />
              </div>
              <div class="tongji_item_name">禁停</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="tongji_item" @click="getMapLine(3)">
              <div class="tongji_item_num" style="color:#F7B500;">
                <DigitRoll :rollDigits="tongji.xt" />
              </div>
              <div class="tongji_item_name">限停</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="tongji_item" @click="getMapLine(4)">
              <div class="tongji_item_num" style="color:#3473FE;">
                <DigitRoll :rollDigits="tongji.lt" />
              </div>
              <div class="tongji_item_name">临停</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 右侧头部 -->
    <div class="roadIn_r_t">
      <div class="common_head" @click="clickTitle(5)">
        <div class="common_item active">
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px">信息概览</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="roadIn_l_r_box">
        <el-row>
          <el-col :span="6">
            <div class="tongji_item">
              <div class="tongji_item_num">
                <DigitRoll :rollDigits="tongji1.jrddl" />
              </div>
              <div class="tongji_item_name">今日订单量</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="tongji_item">
              <div class="tongji_item_num">
                <DigitRoll :rollDigits="tongji1.tcsc" />
              </div>
              <div class="tongji_item_name">停车时长</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="tongji_item">
              <div class="tongji_item_num">
                <DigitRoll :rollDigits="tongji1.drzcyhs" />
              </div>
              <div class="tongji_item_name">当日注册用户数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="tongji_item">
              <div class="tongji_item_num">
                <DigitRoll :rollDigits="tongji1.zzcyhs" />
              </div>
              <div class="tongji_item_name">总注册用户数</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 右侧头部搜索下拉 -->
    <div class="search_park">
      <el-input v-model="selectParkName" placeholder="请输入内容" @input='searchParkList' ></el-input>
      <ul class="search_park_list" v-if="parkList.length>0">
        <li class="search_park_item" @click="selectPark(item)" v-for="(item,index) in parkList" :key='index'>{{item.name}}</li>
      </ul>
    </div>
    <!-- 左侧中部 -->
    <div class="roadIn_l_c" :class="moveFlag?'goleft':'backleft'">
      <div class="common_head">
        <div class="common_item active">
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title">各区道路类型汇总信息</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div
        class="roadIn_l_c_body"
        @mouseover="chartChangeFlag=false"
        @mouseleave="chartChangeFlag=true"
      >
        <sysChart @getCityArea="getCityArea" :options="leftChartOptions" :echart_height="'240px'"></sysChart>
      </div>
    </div>
    <!-- 右侧中部 -->
    <div class="roadIn_r_c">
      <div class="common_head">
        <div
          @mouseover="hoverActive('rc',0)"
          @mouseleave="hoverLeaveActive('rc')"
          @click="changeActive('rightCenterActive',0)"
          :class="'common_item '+(rc===0||rightCenterActive===0?'active':'')"
          style="cursor: pointer;min-width: 120px;"
        >
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px">停车时长</div>
        </div>
        <div
          @mouseover="hoverActive('rc',1)"
          @mouseleave="hoverLeaveActive('rc')"
          @click="changeActive('rightCenterActive',1)"
          :class="'common_item '+(rc===1||rightCenterActive===1?'active':'')"
          style="cursor: pointer;min-width: 120px;"
        >
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title">欠费率</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="roadIn_r_c_body">
        <sysChart
          :options="rightChartOptions"
          v-if="rightCenterActive===0"
          :echart_height="'280px'"
        ></sysChart>
        <sysChart
          :options="rightChartOptions1"
          v-if="rightCenterActive===1"
          :echart_height="'280px'"
        ></sysChart>
      </div>
    </div>
    <!-- 左侧新增下拉框 -->
    <div class="select_left_box" :class="moveFlag?'selectgoleft':'selectbackleft'">
      <el-select v-model="selectLeftParkArea" placeholder="选择辖区" @change="selectLeftAreaChange">
        <el-option v-for="item in areaList" :key="item.code" :label="item.label" :value="item.code"></el-option>
      </el-select>
    </div>
    <!-- 左侧底部 -->
    <div class="roadIn_l_b" :class="moveFlag?'goleft':'backleft'">
      <div class="common_head">
        <div class="common_item active">
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title">道路考核分数列表</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="roadIn_l_b_body">
        <div class="roadIn_l_b_tb_h"></div>
        <div class="roadIn_l_b_tb_b"></div>
        <div class="common_table_head">
          <el-row>
            <el-col :span="8">
              <div class="common_cell">区名</div>
            </el-col>
            <el-col :span="8">
              <div class="common_cell">街道名称</div>
            </el-col>
            <el-col :span="8">
              <div class="common_cell">综合评分</div>
            </el-col>
          </el-row>
        </div>
        <div class="common_table_body" style="color:#fff;">
          <vue-seamless-scroll :data="tableData" class="seamless-warp" :class-option="classOption">
            <div class="common_row" v-for="(item,index) in tableData" :key="index">
              <el-row>
                <el-col :span="8">
                  <div class="common_cell">{{item.area_name}}</div>
                </el-col>
                <el-col :span="8">
                  <div class="common_cell">{{item.street_name}}</div>
                </el-col>
                <el-col :span="8">
                  <div class="common_cell">{{item.jam_index}}</div>
                </el-col>
              </el-row>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <!-- 右侧底部 -->
    <div class="roadIn_r_b">
      <div class="common_head">
        <div
          @mouseover="hoverActive('rb',0)"
          @mouseleave="hoverLeaveActive('rb')"
          @click="changeActive('rightBottomActive',0)"
          :class="'common_item '+(rb===0||rightBottomActive===0?'active':'')"
          style="cursor: pointer;min-width: 120px;"
        >
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px;">道路周转率</div>
        </div>
        <div
          @mouseover="hoverActive('rb',1)"
          @mouseleave="hoverLeaveActive('rb')"
          @click="changeActive('rightBottomActive',1)"
          :class="'common_item '+(rb===1||rightBottomActive===1?'active':'')"
          style="cursor: pointer;min-width: 125px;"
        >
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px;">运管员信息</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="roadIn_r_b_body">
        <div class="roadIn_r_b_tb_h"></div>
        <div class="roadIn_r_b_tb_b"></div>
        <div class="common_table_head">
          <el-row v-if="rightBottomActive===0">
            <el-col :span="12">
              <div class="common_cell">道路名称</div>
            </el-col>
            <el-col :span="12">
              <div class="common_cell">周转率</div>
            </el-col>
          </el-row>
          <el-row v-if="rightBottomActive===1">
            <el-col :span="12">
              <div class="common_cell">姓名</div>
            </el-col>
            <el-col :span="12">
              <div class="common_cell">手机号</div>
            </el-col>
          </el-row>
        </div>
        <div class="common_table_body" style="color:#fff;">
          <vue-seamless-scroll
            :data="tableData1"
            class="seamless-warp"
            :class-option="classOption"
            v-if="rightBottomActive===0"
          >
            <div class="common_row" v-for="(item,index) in tableData1" :key="index">
              <el-row>
                <el-col :span="12">
                  <div class="common_cell">{{item.street_name}}</div>
                </el-col>
                <el-col :span="12">
                  <div class="common_cell">
                    <!-- <span v-if="item.Saturation === '爆满'" style="color:#FF6F6F">{{item.Saturation}}</span>
                    <span v-if="item.Saturation === '拥挤'" style="color:#F7B500">{{item.Saturation}}</span> -->
                    <span v-if="item.Saturation>=120" style="color:#FF6F6F">{{item.Saturation}}%</span>
                    <span v-if="item.Saturation>=100&&item.Saturation<120" style="color:#F7B500">{{item.Saturation}}%</span>
                    <span v-if="item.Saturation<100" style="color:#32FFB4">{{item.Saturation}}%</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </vue-seamless-scroll>
          <vue-seamless-scroll
            :data="tableData2"
            class="seamless-warp"
            :class-option="classOption"
            v-if="rightBottomActive===1"
          >
            <div class="common_row" v-for="(item,index) in tableData2" :key="index">
              <el-row>
                <el-col :span="12">
                  <div class="common_cell">{{item.name}}</div>
                </el-col>
                <el-col :span="12">
                  <div class="common_cell">{{item.phone}}</div>
                </el-col>
              </el-row>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <div class="roadIn_r_c_btns">
      <div class="roadIn_r_c_btn1" @click="clickTitle(2)">
        <div class="roadIn_r_b_tb_num">
          <DigitRoll :rollDigits="tongji2.ygldlsl" />
        </div>
        <div class="roadIn_r_b_tb_name">已管理道路数量</div>
      </div>
      <div class="roadIn_r_c_btn2" @click="clickTitle(3)">
        <div class="roadIn_r_b_tb_num">
          <DigitRoll :rollDigits="tongji2.zgldlsl" />
        </div>
        <div class="roadIn_r_b_tb_name">总道路数量</div>
      </div>
    </div>
    <div class="roadIn_c_t">
      <div class="roadIn_c_t_box">
        <div class="roadIn_c_t_item">
          <i class="circle_1"></i>
          准停道路
        </div>
        <div class="roadIn_c_t_item">
          <i class="circle_2"></i>
          禁停道路
        </div>
        <div class="roadIn_c_t_item">
          <i class="circle_3"></i>
          限停道路
        </div>
        <div class="roadIn_c_t_item">
          <i class="circle_4"></i>
          临停道路
        </div>
      </div>
    </div>
    <!-- 区域列表 -->
    <div class="area_box" :class="{'show': bottomModelFlag }">
      <ul class="area_list">
        <li
          class="area_item"
          @click="areaClick(item)"
          v-for="(item,index) in bottomAreaList"
          :key="index"
        >{{item.label}}</li>
      </ul>
    </div>
    <!-- 全部区域按钮 -->
    <div class="roadIn_c_b_btn" @click="bottomModelFlag=!bottomModelFlag">
      <div>{{btnText}}</div>
      <i v-if="bottomModelFlag" class="iconfont icon-arrow-up"></i>
      <i v-else class="iconfont icon-arrow-down"></i>
    </div>
    <!-- 区域运管员滚动展示 -->
    <div class="roadIn_c_b" @mouseleave="startAnimate" @mouseover="endAnimate">
      <div class="roadIn_c_b_label">运管员排名：</div>
      <div class="roadIn_c_b_content" style="color:#fff;padding-top:10px;">
        <vue-seamless-scroll :data="newItems" :class-option="optionLeft" class="seamless-warp2">
          <ul class="item">
            <li v-for="(item,index) in newItems" :key="index"><span class="newItem_title" v-if="item.order==1&&btnText=='全部'">{{item.area}}：</span>{{item.detail}}</li>
          </ul>
        </vue-seamless-scroll>
        <!-- <VTextMarquee :speed="60" :animate="runAnimate">
          <slot>
            <span
              class="marquee_item"
              @click="showPersonPoint(ind)"
              v-for="(item,ind) in newItems"
              :key="ind"
            >{{item.detail}}</span>
          </slot>
        </VTextMarquee> -->
      </div>
    </div>
    <!-- 左侧弹框 -->
    <div class="left_model" :class="moveFlag?'leftmodelgo':'leftmodelback'">
      <div class="left_model_title">
        <span>{{model_title}}</span>
        <el-button
          @click="moveFlag=!moveFlag"
          class="model_close"
          type="primary"
          icon="el-icon-back"
          circle
        ></el-button>
      </div>
      <div class="model_content" v-if="clickTitleNum==1">
        <div class="roadIn_l_t_box">
          <el-row>
            <el-col :span="6">
              <div class="tongji_item" @click="getMapLine(1)">
                <div class="tongji_item_num" style="color:#81FF5D;">
                  <DigitRoll :rollDigits="tongji.zt" />
                </div>
                <div class="tongji_item_name">准停</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="tongji_item" @click="getMapLine(2)">
                <div class="tongji_item_num" style="color:#FF6F6F;">
                  <DigitRoll :rollDigits="tongji.jt" />
                </div>
                <div class="tongji_item_name">禁停</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="tongji_item" @click="getMapLine(3)">
                <div class="tongji_item_num" style="color:#F7B500;">
                  <DigitRoll :rollDigits="tongji.xt" />
                </div>
                <div class="tongji_item_name">限停</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="tongji_item" @click="getMapLine(4)">
                <div class="tongji_item_num" style="color:#3473FE;">
                  <DigitRoll :rollDigits="tongji.lt" />
                </div>
                <div class="tongji_item_name">临停</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <ul class="road_list" v-if="fourTypeList.length>0">
          <li class="road_list_title">
            <h2>道路名称</h2>
            <h2>道路类型</h2>
          </li>
          <li class="road_list_item" v-for="(item,index) in fourTypeList" :key="index">
            <span>{{item.roadName}}</span>
            <span style="color:#81FF5D;" v-if="item.roadType==1">{{item.roadType | formatRoadType }}</span>
            <span style="color:#FF6F6F;" v-if="item.roadType==2">{{item.roadType | formatRoadType }}</span>
            <span style="color:#F7B500;" v-if="item.roadType==3">{{item.roadType | formatRoadType }}</span>
            <span style="color:#3473FE;" v-if="item.roadType==4">{{item.roadType | formatRoadType }}</span>
          </li>
        </ul>
        <div v-else class="no_data">
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt />
          <span>暂无数据</span>
        </div>
      </div>
      <div class="model_content" v-if="clickTitleNum==2">
        <div class="managed_road_title">
          <div class="title_left">已管理道路数量</div>
          <countTo :startVal="0" :endVal="allManagedRoadList.length" :duration="3000"></countTo>
        </div>
        <ul class="road_list" v-if="allManagedRoadList.length>0">
          <li class="road_list_title">
            <h2>道路名称</h2>
          </li>
          <li class="road_list_item" v-for="(item,index) in allManagedRoadList" :key="index">
            <span>{{item.roadName}}</span>
          </li>
        </ul>
        <div v-else class="no_data">
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt />
          <span>暂无数据</span>
        </div>
      </div>
      <div class="model_content" v-if="clickTitleNum==3">
        <div class="managed_road_title">
          <div class="title_left">总道路数量</div>
          <countTo :startVal="0" :endVal="allRoldList.length" :duration="3000"></countTo>
        </div>
        <ul class="road_list" v-if="allRoldList.length>0">
          <li class="road_list_title">
            <h2>道路名称</h2>
          </li>
          <li class="road_list_item" v-for="(item,index) in allRoldList" :key="index">
            <span>{{item.roadName}}</span>
          </li>
        </ul>
        <div v-else class="no_data">
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt />
          <span>暂无数据</span>
        </div>
      </div>
      <div class="model_content" v-if="clickTitleNum==4">
        <ul class="road_list road_list1" v-if="areaRoadList.length>0">
          <li class="road_list_title">
            <h2>道路名称</h2>
            <h2>道路类型</h2>
            <h2>所属辖区</h2>
          </li>
          <li class="road_list_item" v-for="(item,index) in areaRoadList" :key="index">
            <span>{{item.roadName}}</span>
            <span style="color:#81FF5D;" v-if="item.roadType==1">{{item.roadType | formatRoadType }}</span>
            <span style="color:#FF6F6F;" v-if="item.roadType==2">{{item.roadType | formatRoadType }}</span>
            <span style="color:#F7B500;" v-if="item.roadType==3">{{item.roadType | formatRoadType }}</span>
            <span style="color:#3473FE;" v-if="item.roadType==4">{{item.roadType | formatRoadType }}</span>
            <span>{{item.region}}</span>
          </li>
        </ul>
        <div v-else class="no_data">
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt />
          <span>暂无数据</span>
        </div>
      </div>
      <div class="model_content" v-if="clickTitleNum==5">
        <ul class="road_list road_list1" v-if="orderList.length>0">
          <li class="road_list_title">
            <h2>车牌号</h2>
            <h2>进场时间</h2>
            <h2>出场时间</h2>
            <h2>停放时长</h2>
          </li>
          <li class="road_list_item" v-for="(item,index) in orderList" :key="index">
            <span>{{item.carNumber}}</span>
            <span>{{item.inTime}}</span>
            <span>{{item.outTime}}</span>
            <span>{{item.timeLength | formatSeconds}}</span>
          </li>
        </ul>
        <div v-else class="no_data">
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt />
          <span>暂无数据</span>
        </div>
      </div>
    </div>
    <!-- 中间道路停车场数据弹框 -->
    <transition name="fade">
      <div class="center_model" v-if="fadeInFlag">
        <div class="center_model_title">
          {{roadParkPlace.parkName}}停车场
          <el-button
            @click="fadeInFlag=!fadeInFlag"
            class="model_close"
            type="primary"
            icon="el-icon-close"
            circle
          ></el-button>
        </div>
        <div class="parking_lot">
          <div class="parking_lot_item">车位总数：{{roadParkPlace.allNum}}</div>
          <div class="parking_lot_item">实时泊位数：{{roadParkPlace.realTime}}</div>
          <div class="parking_lot_item">共享车位数：{{roadParkPlace.shareNum}}</div>
        </div>
        <ul class="park_list" v-if="roadParkPlace.spaceList.length>0">
          <li class="park_list_item" v-for="(item,index) in roadParkPlace.spaceList" :key="index">
            <span v-if="item.type==0" :class="{'green':item.type==0}">{{item.number}}</span>
            <span v-if="item.type==2" :class="{'red':item.type==2}">{{item.carNumber}}</span>
          </li>
        </ul>
        <div v-else class="no_data">
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt />
          <span>暂无数据</span>
        </div>
        <div class="park_tips">
          <div class="park_tips_red"></div>
          <span>已停车位</span>
          <div class="park_tips_green"></div>
          <span>空闲车位</span>
          <div class="user_info">
            <div class="user_info_item">
              <i class="iconfont icon-touxiang"></i>
              <span>收费员：张三</span>
            </div>
            <div class="user_info_item">
              <i class="iconfont icon-shouji"></i>
              <span>手机号：15098185502</span>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import sysHeader from "@/components/common/sysHeader.vue";
import sysMap from "@/components/common/sysMap.vue";
import sysChart from "@/components/common/sysChart.vue";
import DigitRoll from "@huoyu/vue-digitroll";
import marqueeLeft from "@/components/common/marqueeLeft.vue";
import config from "@/api/config.js";
import util from "@/utils/util.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import { VTextMarquee } from "vue-text-marquee";
import axios from "axios";
import countTo from "vue-count-to";
export default {
  name: "roadIn",
  components: {
    sysHeader,
    sysMap,
    sysChart,
    DigitRoll,
    marqueeLeft,
    VTextMarquee,
    vueSeamlessScroll,
    countTo,
  },
  computed: {
    classOption() {
      return util.classOption;
    },
    optionLeft () {
        return {
                direction: 2,
                limitMoveNum: 3
            }
    }
    // trLength(){
    //   return Math.floor(parseInt(this.roadParkPlace.spaceList.length)/10)
    // }
  },
  filters: {
    formatRoadType(type) {
      switch (type) {
        case "1":
          return "准停道路";
          break;
        case "2":
          return "禁停道路";
          break;
        case "3":
          return "限停道路";
          break;
        case "4":
          return "临停道路";
          break;
        default:
          "";
      }
    },
    formatSeconds(value) {
      let result = parseInt(value);
      let h =
        Math.floor(result / 3600) < 10
          ? "0" + Math.floor(result / 3600)
          : Math.floor(result / 3600);
      let m =
        Math.floor((result / 60) % 60) < 10
          ? "0" + Math.floor((result / 60) % 60)
          : Math.floor((result / 60) % 60);
      let s =
        Math.floor(result % 60) < 10
          ? "0" + Math.floor(result % 60)
          : Math.floor(result % 60);
      result = `${h}:${m}:${s}`;
      return result;
    },
  },
  data() {
    return {
      btnText: "全部",
      model_title: "", //弹框标题
      selectLeftParkArea:'',//左侧选择区域
      selectParkName:'',//右侧选择搜索停车场
      areaList: [
        { code: "370101", label: "市辖区" },
        { code: "370102", label: "历下区" },
        { code: "370103", label: "市中区" },
        { code: "370104", label: "槐荫区" },
        { code: "370105", label: "天桥区" },
        { code: "370112", label: "历城区" },
        { code: "370113", label: "长清区" },
        { code: "370124", label: "平阴县" },
        { code: "370125", label: "济阳县" },
        { code: "370126", label: "商河县" },
        { code: "370181", label: "章丘市" },
      ],
      parkList:[
        
      ],
      bottomModelFlag: false,
      runAnimate: true,
      moveFlag: false, //左侧是否展开
      fadeInFlag: false, //中间弹框展示
      clickTitleNum: 0, //点击的那个标题
      allRoldList: [],
      fourTypeList: [], //弹框内四类所有道路数据
      allManagedRoadList: [], //已管理道路
      areaRoadList: [], //辖区道路数据
      orderList: [], //订单列表
      roadParkPlace: [], //道路停车场数据
      bottomAreaList: [
        { code: "", label: "全部" },
        { code: "370101", label: "市辖区" },
        { code: "370102", label: "历下区" },
        { code: "370103", label: "市中区" },
        { code: "370104", label: "槐荫区" },
        { code: "370105", label: "天桥区" },
        { code: "370112", label: "历城区" },
        { code: "370113", label: "长清区" },
        { code: "370124", label: "平阴县" },
        { code: "370125", label: "济阳县" },
        { code: "370126", label: "商河县" },
        { code: "370181", label: "章丘市" },
      ],
      active1: 0,
      active2: 0,
      lineData: [],
      markers: [],
      newItems: [
       
      ],
      canScroll: true,
      tongji: {
        zt: 0,
        jt: 0,
        xt: 0,
        lt: 0,
      },
      tongji1: {
        jrddl: 0,
        tcsc: 0,
        drzcyhs: 0,
        zzcyhs: 0,
      },
      tongji2: {
        ygldlsl: 0,
        zgldlsl: 0,
      },
      tableData: [],
      tableData1: [],
      tableData2: [],
      leftInterval: undefined,
      rightInterval: undefined,
      chartChangeFlag: false,
      chartChangeInterval: undefined,
      chartPosition: 0,
      rb: 0,
      rc: 0,
      rightBottomActive: 0,
      rightCenterActive: 0,
      rightChartOptions1: {
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c}辆({d}%)",
        },
        color: [
          "#4153C8",
          "#CC4BB6",
          "#E95F70",
          "#5289C9",
          "#CCB33A",
          "#65D5BC",
        ],
        legend: {
          orient: "vertical",
          textStyle: {
            color: "rgba(255,255,255,0.8)",
            fontSize: 14,
            fontWeight: "bold",
          },
          top: 40,
          right: 30,
          data: [
            "100元以下",
            "100-200元",
            "200-500元",
            "500-1000元",
            "1000元以上",
          ],
        },
        series: [
          {
            name: "欠费率",
            type: "pie",
            startAngle: 180,
            center: ["35%", "40%"],
            radius: ["25%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              color: "#fff",
              fontSize: 14,
              fontWeight: "bold",
              formatter: "{d}%",
            },
            labelLine: {
              length: 10,
              length2: 10,
            },
            data: [
              { value: 0, name: "100元以下" },
              { value: 0, name: "100-200元" },
              { value: 0, name: "200-500元" },
              { value: 0, name: "500-1000元" },
              { value: 0, name: "1000元以上" },
            ],
          },
        ],
      },
      rightChartOptions: {
        tooltip: {
          trigger: "item",
          formatter(params) {
            let result = "";
            result += params.name + "<br/>";
            result += params.value + "(" + params.percent + ")<br/>";
            result += "短信发送数：" + params.data.message + "条";
            return result;
          },
          //formatter: '{b}<br/>{c}辆({d}%)'
        },
        color: ["#42E0FC", "#A4E5FF", "#4E7CD9", "#4EBA92", "#0091FF"],
        legend: {
          orient: "vertical",
          textStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 14,
            fontWeight: "bold",
          },
          top: 40,
          right: 30,
          data: [
            "2小时以下",
            "2-4小时",
            "4-6小时",
            "6-8小时",
            "8-10小时",
            "10小时以上",
          ],
        },
        series: [
          {
            name: "停车时长",
            type: "pie",
            startAngle: 180,
            center: ["35%", "40%"],
            radius: ["25%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              color: "#fff",
              fontSize: 14,
              fontWeight: "bold",
              formatter: "{d}%",
            },
            labelLine: {
              length: 10,
              length2: 10,
            },
            data: [
              { value: 0, name: "2小时以下", message: 0 },
              { value: 0, name: "2-4小时", message: 0 },
              { value: 0, name: "4-6小时", message: 0 },
              { value: 0, name: "6-8小时", message: 0 },
              { value: 0, name: "8-10小时", message: 0 },
              { value: 0, name: "10小时以上", message: 0 },
            ],
          },
        ],
      },
      leftChartOptions: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid: {
          top: 30,
          left: 60,
          bottom: 100,
        },
        dataZoom: {
          textStyle: {
            color: "rgba(255,255,255,0.5)",
          },
          type: "slider",
          start: "0",
          end: "30",
        },
        silent: true,
        xAxis: {
          type: "category",
          triggerEvent: true,
          data: [],
          axisPointer: {
            type: "shadow",
          },
          axisLine: {
            lineStyle: {
              color: "#1B9EEA",
            },
          },
          axisLabel: {
            lineHeight: "30",
            color: "#BFE8FF",
            fontSize: "14",
            fontWeight: "bold",
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "value",
            name: "",
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.5)",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#32FFB4",
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "准停",
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#81FF5D",
                  },
                  {
                    offset: 0.5,
                    color: "#81FF5D",
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0)",
                  },
                ]),
              },
            },
            barWidth: "10%",
            data: [],
          },
          {
            name: "禁停",
            type: "bar",
            barWidth: "10%",
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#FF6F6F",
                  },
                  {
                    offset: 0.5,
                    color: "#FF6F6F",
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0)",
                  },
                ]),
              },
            },
            data: [],
          },
          {
            name: "限停",
            type: "bar",
            barWidth: "10%",
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#F7B500",
                  },
                  {
                    offset: 0.5,
                    color: "#F7B500",
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0)",
                  },
                ]),
              },
            },
            data: [],
          },
          {
            name: "临停",
            type: "bar",
            barWidth: "10%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#3473FE",
                  },
                  {
                    offset: 0.5,
                    color: "#3473FE",
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0)",
                  },
                ]),
              },
            },
            data: [],
          },
        ],
      },
      points: [],
    };
  },
  created() {
    //获取弹框内所有道路数据
    this.getAllRoldList();
    //四类道路数量
    this.getFourTypeRoldList();
    //获取弹框内所有已管理道路数据
    this.getAllManagedRoadList();
    //订单信息概览
    this.getOrderList();
  },
  mounted() {
    this.getLeftTable();
    this.getRightTable();
    this.getLeftChart();
    this.getCenterBottom('');
    this.getLeftTopTongji();
    this.getRightTopTongji();
    this.getRightCenterTongji();
    this.getRightCenterChart();
    this.getMarkData();
    //this.getLineData()
  },
  watch: {
    rightCenterActive(v) {
      if (v === 0) {
        this.getRightCenterChart();
      } else {
        this.getRightCenterChart1();
      }
    },
    rightBottomActive(v) {
      if (v === 0) {
        this.getRightTable();
      } else {
        this.getRightTable1();
      }
    },
    chartPosition(v) {
      const start = v;
      const startMap = {
        0: 0,
        36: 36,
        63: 70,
      };
      const endMap = {
        0: 30,
        36: 67,
        63: 100,
      };
      this.leftChartOptions.dataZoom.start = startMap[start];
      this.leftChartOptions.dataZoom.end = endMap[start];
    },
  },
  methods: {
    //选择区域改变
    selectLeftAreaChange(e) {
      console.log("res", e);
      //this.rightTableData=[]
      //this.getRightTop(this.selectParkArea)
    },
    //右侧搜索停车场功能
    searchParkList(e){
      console.log("搜索停车场",e);
      this.parkList=[
        {
          id:1,
          name:'历下停车场'
        },
        {
          id:2,
          name:'历城停车场'
        },{
          id:3,
          name:'高新停车场'
        },
        {
          id:4,
          name:'天桥停车场'
        }
      ]
    },
    //点击停车场列表项请求对应停车场信息
    selectPark(item){
      console.log("停车场id",item.id,item.name);
      this.selectParkName=item.name;
      this.parkList=[]
    },
    //点击区域
    areaClick(item) {
      this.btnText = item.label;
      this.newItems=[]
      //请求接口返回对应区域数据
      this.getCenterBottom(item.code);
    },
    //获取所有线路
    getAllRoldList() {
      axios({
        method: "post",
        url: config.basePath + "park/index/getRoadListByType",
        data: {
          type: 1,
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          //console.log("res", res);
          if (res.status >= 200 && res.status < 300) {
            this.allRoldList = res.data.data;
          } else {
            // console.log(res.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    //获取弹框内四类道路数据
    getFourTypeRoldList() {
      this.$api.get(config.basePath + "park/index/getRoadList", {}, (res) => {
        if (res.data.code == 0) {
          this.fourTypeList = res.data.data;
          //console.log("res",this.allRoadList)
        }
      });
    },
    //获取弹框内所有已管理道路数据
    getAllManagedRoadList() {
      axios({
        method: "post",
        url: config.basePath + "park/index/getRoadListByType",
        data: {
          type: 1,
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          //console.log("area", res);
          if (res.status >= 200 && res.status < 300) {
            this.allManagedRoadList = res.data.data;
          } else {
            //console.log(res.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    //点击栏目标题展示弹框及其对应数据
    clickTitle(num) {
      this.moveFlag = !this.moveFlag;
      if (num == 1) {
        this.clickTitleNum = 1;
        this.model_title = "全市四类道路汇总信息";
      } else if (num == 2) {
        this.clickTitleNum = 2;
        this.model_title = "已管理道路";
      } else if (num == 3) {
        this.clickTitleNum = 3;
        this.model_title = "所有道路展示";
      } else if (num == 5) {
        this.clickTitleNum = 5;
        this.model_title = "订单信息概览";
      }
    },
    //点击柱状图那个辖区
    getCityArea(area) {
      this.clickTitleNum = 4;
      this.areaRoadList = [];
      this.moveFlag = !this.moveFlag;
      //console.log("88", area);
      this.model_title = `${area}道路汇总`;
      axios({
        method: "post",
        url: config.basePath + "park/index/getRoadListByType",
        data: {
          region: area,
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          //console.log("res", res);
          if (res.status >= 200 && res.status < 300) {
            this.areaRoadList = res.data.data;
          } else {
            //console.log(res.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    //点击订单信息概览
    getOrderList() {
      this.$api.get(
        config.basePath + "park/index/getPayFlowList",
        {},
        (res) => {
          //console.log("order", res);
          if (res.data.code == 0) {
            this.orderList = res.data.data;
            //console.log("res",this.allRoadList)
          }
        }
      );
    },
    //点击道路线展示停车场信息事件
    clickLineHandel(bdCarParkNumber) {
      axios({
        method: "post",
        url: config.basePath + "park/index/getParkSpaceList",
        data: {
          bdCarParkNumber,
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          //console.log("res111",res)
          this.fadeInFlag = true;
          if (res.status >= 200 && res.status < 300) {
            this.roadParkPlace = res.data.data;
          } else {
            //console.log(res.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    changeCenter({ zoom, location }) {
      /*
                if(zoom >= 12) {
                    console.log('显示点信息')
                    this.markers = []
                    this.$nextTick(() => {
                        this.$refs.sysMap.onHideMarker()
                    })
                    this.getMarkData()
                    this.getLineData()
                } else {
                    console.log('隐藏点信息')
                    this.markers = []
                    this.lineData = []
                    this.$nextTick(() => {
                        this.$refs.sysMap.onHideMarker()
                    })
                    this.getMarkTongji()
                }*/
    },
    //获取地图标记
    getMarkData() {
      axios({
        method: "post",
        url: config.basePath + "park/index/getAdminData",
        data: {
          code:'',
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          console.log("markes",res)
          if (res.data.code==0) {
            this.markers = res.data.data;
          } else {
            //console.log(response.message);
          }
        })
        .catch((err) => [console.log(err)]);
     
    },
    getMarkTongji() {
      this.$api.get(
        config.basePath + "park/index/statisticsTotalData",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.markers = data;
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    startAnimate() {
      this.runAnimate = true;
    },
    endAnimate() {
      this.runAnimate = false;
    },
    getLineData() {
      this.$api.get(
        config.basePath + "park/index/getMapLine",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.lineData = data;
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    //获取地图划线
    getMapLine(num) {
      axios({
        method: "post",
        url: config.basePath + "park/index/getMapLine",
        data: {
          type: num,
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          if (res.status >= 200 && res.status < 300) {
            this.lineData = res.data.data;
          } else {
            //console.log(response.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    getLeftTopTongji() {
      this.$api.get(
        config.basePath + "park/index/getAllRoadData",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.tongji = {
              zt: data.approve_park || 0,
              jt: data.forbidden_park || 0,
              xt: data.limit_park || 0,
              lt: data.temporary_park || 0,
            };
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightTopTongji() {
      this.$api.get(
        config.basePath + "park/index/getTotalInfo",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.tongji1 = {
              jrddl: data.order_num || 0,
              tcsc: data.parking_time || 0,
              drzcyhs: data.register_num || 0,
              zzcyhs: data.total_reg_num || 0,
            };
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightCenterTongji() {
      this.$api.get(
        config.basePath + "park/index/getMixRoadData",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            //console.log(data);
            this.tongji2 = {
              ygldlsl: data.manage_road_num || 0,
              zgldlsl: data.manage_total_num || 0,
            };
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightCenterChart1() {
      this.rightChartOptions1.series[0].data[0].value = 0;
      this.rightChartOptions1.series[0].data[1].value = 0;
      this.rightChartOptions1.series[0].data[2].value = 0;
      this.rightChartOptions1.series[0].data[3].value = 0;
      this.rightChartOptions1.series[0].data[4].value = 0;

      this.$api.get(
        config.basePath + "park/index/getOweFeeRate",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.rightChartOptions1.series[0].data[0].value = data["under_100"];
            this.rightChartOptions1.series[0].data[1].value = data["100to200"];
            this.rightChartOptions1.series[0].data[2].value = data["200to500"];
            this.rightChartOptions1.series[0].data[3].value = data["500to1000"];
            this.rightChartOptions1.series[0].data[4].value = data["upon1000"];
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightCenterChart() {
      this.rightChartOptions.series[0].data[0].value = 0;
      this.rightChartOptions.series[0].data[1].value = 0;
      this.rightChartOptions.series[0].data[2].value = 0;
      this.rightChartOptions.series[0].data[3].value = 0;
      this.rightChartOptions.series[0].data[4].value = 0;
      this.$api.get(
        config.basePath + "park/index/getParkingTime",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.rightChartOptions.series[0].data[0].value = data["under_100"];
            this.rightChartOptions.series[0].data[1].value = data["100to200"];
            this.rightChartOptions.series[0].data[2].value = data["200to500"];
            this.rightChartOptions.series[0].data[3].value = data["500to1000"];
            this.rightChartOptions.series[0].data[4].value = data["upon1000"];

            this.rightChartOptions.series[0].data[0].message =
              data["m_under_100"] || 0;
            this.rightChartOptions.series[0].data[1].message =
              data["m_100to200"] || 0;
            this.rightChartOptions.series[0].data[2].message =
              data["m_200to500"] || 0;
            this.rightChartOptions.series[0].data[3].message =
              data["m_500to1000"] || 0;
            this.rightChartOptions.series[0].data[4].message =
              data["m_upon1000"] || 0;
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    //获取底部运管员排名
    getCenterBottom(code) {
      axios({
        method: "post",
        url: config.basePath + "park/index/getAdminData",
        data: {
          code,
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          if (res.data.code==0) {
            const newData = res.data.data.map((item, index) => {
              return {
                area: item.area,
                order:item.order,
                detail: item.order + "." + item.name + " " + item.phone,
              };
            });
            this.newItems = newData;
          } else {
            //console.log(response.message);
          }
        })
        .catch((err) => [console.log(err)]);
    },
    getLeftChart() {
      this.$api.get(
        config.basePath + "park/index/getAllRegionData",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            //console.log(data);
            const xAxis = {
              type: "category",
              data: [],
              axisPointer: {
                type: "shadow",
              },
              axisLine: {
                lineStyle: {
                  color: "#1B9EEA",
                },
              },
              axisLabel: {
                lineHeight: "30",
                fontSize: "14",
                fontWeight: "bold",
                color: "#BFE8FF",
              },
              axisTick: {
                show: false,
              },
            };
            const data1 = [];
            const data2 = [];
            const data3 = [];
            const data4 = [];
            data.forEach((item) => {
              xAxis.data.push(item.region_name);
              data1.push(item.approve_park);
              data2.push(item.forbidden_park);
              data3.push(item.limit_park);
              data4.push(item.temporary_park);
            });
            this.leftChartOptions.xAxis = xAxis;
            this.leftChartOptions.series[0].data = data1;
            this.leftChartOptions.series[1].data = data2;
            this.leftChartOptions.series[2].data = data3;
            this.leftChartOptions.series[3].data = data4;
            this.startChangeChart();
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    startChangeChart() {
      this.chartChangeFlag = true;
      if (this.chartChangeInterval) {
        clearInterval(this.chartChangeInterval);
      }
      this.chartChangeInterval = setInterval(() => {
        if (this.chartChangeFlag) {
          const map1 = {
            0: 36,
            36: 63,
            63: 0,
          };
          this.chartPosition = map1[this.chartPosition];
        }
      }, 8000);
    },
    getLeftTable() {
      this.$api.get(
        config.basePath + "park/index/getJamData",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data || [];
            this.tableData = [].concat(...data).concat(...data);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightTable1() {
      this.tableData2 = [];
      this.$api.get(
        config.basePath + "park/index/getAdminPhone",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data || [];
            this.tableData2 = [].concat(...data).concat(...data);
          } else {
            //console.log(response.message);
          }
        }
      );
      
    },
    getRightTable() {
      this.tableData1 = [];
      this.$api.get(
        config.basePath + "park/index/getParkingWarning",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data || [];
            this.tableData1 = [].concat(...data).concat(...data);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    changeTable(data) {
      data.push(data[0]); //把第一条数据插入数组最有一条
      data.shift(); //删除数组中第一条数据
    },
    playLeftTable() {
      if (this.leftInterval) {
        clearInterval(this.leftInterval);
      }
      this.leftInterval = setInterval(() => {
        this.changeTable(this.tableData);
      }, 8000); //每两秒执行一次插入删除操作
    },
    playRightTable() {
      if (this.rightInterval) {
        clearInterval(this.rightInterval);
      }
      this.rightInterval = setInterval(() => {
        this.changeTable(this.tableData1);
      }, 8000); //每两秒执行一次插入删除操作
    },
    hoverActive(key, v) {
      this[key] = v;
    },
    hoverLeaveActive(key) {
      this[key] = -1;
    },
    changeActive(key, v) {
      this[key] = v;
    },
    showPersonPoint(ind) {
      this.$refs.sysMap.showPersonPoint(ind);
    },
    //获取运管员轨迹
    getLinePoints(employeeId) {
     console.log("运管员id",employeeId)
      axios({
        method: "post",
        url: config.basePath + "park/index/getAdminDataLine",
        data: {
          employeeId,
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          if (res.data.code==0) {
            console.log("运管员轨迹",res);
            this.points=res.data.data.points
          } else {
            //console.log(response.message);
          }
        })
        .catch((err) => [console.log(err)]);
    },
  },
};
</script>

<style scoped>
/* 右侧搜索停车场 */
.search_park{
  position: absolute;
  right: 12px;
  width: 250px;
  top:80px;
  z-index: 110;
}
.search_park >>> .el-input{
  background: #01204d;
  color: #1fb3ff;
}
.search_park >>> .el-input__inner{
   background: #01204d;
  border: 1px solid #1fb3ff;
   color: #1fb3ff;
}
.search_park >>> .el-input__inner::-webkit-input-placeholder {
    color: #1fb3ff;
}
.search_park_list{
  background: rgba(5, 16, 42, 0.8);
  color: #1fb3ff;
  margin:0;
  border: 1px solid #1fb3ff;
}
.search_park_item{
  width: 100%;
  line-height: 50px;
  color: #1fb3ff;
  padding: 0 20px;
  cursor: pointer;
  box-sizing: border-box;
}
.search_park_item:hover{
  background: #1fb3ff;
  color: #fff;
}
/* 左侧下拉框 */
.select_left_box {
  position: absolute;
  transition: all 2s;
  top: 490px;
  width: 200px;
  z-index: 150;
  /* height: 180px; */
}
.select_left_box >>> .el-select {
  width: 100%;
  margin-right: 10px;
}
.select_left_box >>> .el-input__inner {
  color: #1fb3ff;
}
.select_left_box >>> .el-input .el-input__inner {
  background: #01204d;
  border: 1px solid #1fb3ff;
}
.select_left_box >>> .el-input ::-webkit-input-placeholder {
  /* WebKit browsers 适配谷歌 */
  color: #1fb3ff;
}
.selectgoleft{
  left:-560px!important;
  /* animation:goleft 1s forwards;
  -webkit-animation:goleft 1s forwards;  */
}
.selectbackleft{
  left: 268px!important;
  /* animation:backleft 1s forwards;
  -webkit-animation:backleft 1s forwards;  */
}
/* 中间弹框 */
.center_model {
  width: 900px;
  left: 50%;
  top: 50%;
  margin-left: -450px;
  margin-top: -250px;
  background: rgba(6, 16, 40, 0.8);
  border: 1px solid #1c95dc;
  position: absolute;
  z-index: 180;
  padding: 20px 30px;
  box-sizing: border-box;
  transition: all 1s;
}
.fade-enter-active,
.fade-leave-active {
  opacity: 1;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.center_model_title {
  width: 400px;
  height: 50px;
  line-height: 50px;
  color: #9bfff8;
  font-size: 26px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("~@/assets/images/center_model_title_bg.png");
}
.center_model .center_model_title >>> .el-button--primary {
  background-color: #04132c;
  position: absolute;
  right: -250px;
  top: -45px;
  z-index: 122;
}
.parking_lot {
  display: flex;
  width: 500px;
  margin: 20px auto;
  height: 40px;
}
.parking_lot_item {
  color: #fff;
  text-align: center;
  flex: 1;
  line-height: 40px;
  margin: 0 10px;
  background: url("~@/assets/images/center_model_item_bg.png") no-repeat;
  background-size: 100% 100%;
}
.park_list {
  display: flex;
  width: 842px;
  height: 300px;
  overflow-y: scroll;
  flex-wrap: wrap;
  border: 1px solid #1c95dc;
  /* border-top:1px solid #1C95DC; */
  margin: 0;
  margin-bottom: 40px;
}
.park_list::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.park_list .park_list_item {
  width: 104px;
  border-right: 1px solid #1c95dc;
  border-bottom: 1px solid #1c95dc;
  height: 50px;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
.park_list .park_list_item:nth-child(8n) {
  border-right: none;
}
.park_list .park_list_item .green {
  color: #55d142;
}
.park_list .park_list_item .red {
  color: #e53135;
}
.park_tips {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #c5f0fd;
  font-size: 14px;
  position: relative;
}
.park_tips .user_info {
  position: absolute;
  right: 10px;
  bottom: 0px;
}
.park_tips .user_info .user_info_item {
  margin: 5px 0;
}
.park_tips .park_tips_red {
  width: 15px;
  height: 15px;
  background: #e53135;
  margin: 0 10px;
}
.park_tips .park_tips_green {
  width: 15px;
  height: 15px;
  background: #55d142;
  margin: 0 10px;
}
/* 左侧弹窗 */
.left_model {
  width: 460px;
  height: 800px;
  position: absolute;
  left: -560px;
  top: 10%;
  padding: 0 12px;
  background-image: url("~@/assets/images/model_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: all 2s;
  z-index: 120;
}
.left_model .model_content {
  width: 100%;
  /* height: 740px; */
}
.left_model_title {
  position: relative;
  width: 100%;
  height: 40px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  text-align: center;
  /* margin-bottom: 20px; */
}
.left_model .left_model_title >>> .el-button--primary {
  background-color: #04132c;
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 122;
}
/* 道路汇总弹框 */
.road_list {
  color: #b2d9f0;
  width: 100%;
  height: 640px;
  overflow-y: scroll;
  padding-left: 0;
  margin-bottom: 0;
}
.road_list1 {
  height: 740px;
}
.road_list_item {
  display: flex;
  align-items: center;
}
.road_list_item span {
  flex: 1;
  text-align: center;
  padding: 5px 0;
}
.road_list::-webkit-scrollbar {
  display: none;
}
.road_list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #04132c;
}
.road_list::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #04132c;
}
.road_list .road_list_title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.road_list .road_list_title h2 {
  font-weight: 400;
  flex: 1;
  text-align: center;
  font-size: 20px;
}
.left_model .roadIn_l_t_box {
  position: inherit;
  left: 0px;
  right: 0;
  bottom: 0;
}
/* 已管理道路弹框 */
.managed_road_title {
  width: 100%;
  height: 100px;
  background-image: url("~@/assets/images/model_title_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  color: #bfe8ff;
  padding: 0 12px;
}
.managed_road_title .title_left {
  flex: 1;
  text-align: center;
}
.managed_road_title span {
  flex: 1;
  text-align: center;
  font-size: 30px;
  color: #fff;
}
.roadIn_l_b .common_row {
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}
.roadIn_r_b_body .common_row {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
}
.roadIn_r_c_btns {
  height: 116px;
  width: 456px;
  right: 13px;
  top: 536px;
  position: absolute;
  z-index: 130;
}
.roadIn_r_c_btn1 {
  width: 224px;
  height: 116px;
  background: linear-gradient(
    360deg,
    rgba(0, 45, 103, 0.6) 0%,
    rgba(5, 16, 42, 0.6) 100%
  );
  border: 1px solid rgba(27, 158, 234, 0.6);
  float: left;
  cursor: pointer;
}
.roadIn_r_c_btns .roadIn_r_b_tb_num {
  width: 100px;
  margin: 20px auto 0 auto;
  font-size: 32px;
  font-weight: bold;
}
.roadIn_r_b_tb_name {
  font-size: 16px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 20px;
  text-align: center;
}
.roadIn_r_c_btn2 {
  width: 224px;
  height: 116px;
  background: linear-gradient(
    360deg,
    rgba(0, 45, 103, 0.6) 0%,
    rgba(5, 16, 42, 0.6) 100%
  );
  border: 1px solid rgba(27, 158, 234, 0.6);
  float: right;
  cursor: pointer;
}
.roadIn_r_b {
  height: 374px;
  width: 456px;
  right: 13px;
  bottom: 30px;
  position: absolute;
  z-index: 130;
}
.roadIn_r_b_body {
  margin-top: -1px;
  clear: both;
  width: 456px;
  height: 334px;
  position: relative;
  overflow: hidden;
}
.roadIn_r_b_tb_h {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(
    90deg,
    rgba(0, 45, 103, 1) 0%,
    rgba(5, 16, 42, 1) 100%
  );
  border: 1px solid rgba(27, 158, 234, 1);
}
.roadIn_r_b_tb_b {
  position: absolute;
  left: 0;
  right: 0;
  top: 48px;
  bottom: 0;
  border: 1px solid #1b9eea;
  background: rgba(5, 16, 42, 0.8);
}
.roadIn_l_t_header {
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.roadIn_r_c {
  height: 265px;
  width: 456px;
  right: 13px;
  top: 248px;
  position: absolute;
  z-index: 100;
}
.roadIn_r_c_body {
  clear: both;
  height: 225px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.roadIn_r_t {
  height: 142px;
  width: 456px;
  right: 13px;
  top: 79px;
  position: absolute;
  z-index: 100;
}
.roadIn_l_r_box {
  /* height: 90px; */
  padding: 6px 4px;
  position: relative;
  clear: both;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.roadIn_l_r_box .tongji_item_num {
  font-size: 24px;
  font-weight: bold;
}
.roadIn_l_r_box .tongji_item_name {
  top: 12px;
  bottom: auto;
  font-size: 14px;
}
.roadIn_l_r_box .d-roll-wrapper {
  margin-top: 30px;
}
.roadIn_r_b_tb_num {
  color: rgba(255, 255, 255, 1);
}
.tongji_item_num {
  color: rgba(255, 255, 255, 1);
}
.roadIn_c_b {
  width: 768px;
  height: 56px;
  background: linear-gradient(
    360deg,
    rgba(0, 45, 103, 0.6) 0%,
    rgba(5, 16, 42, 0.6) 100%
  );
  border: 1px solid rgba(27, 158, 234, 0.6);
  bottom: 35px;
  margin-left: -340px;
  left: 50%;
  z-index: 100;
  position: absolute;
}
.roadIn_c_b_btn {
  width: 100px;
  height: 56px;
  background: linear-gradient(
    360deg,
    rgba(0, 45, 103, 0.6) 0%,
    rgba(5, 16, 42, 0.6) 100%
  );
  border: 1px solid rgba(27, 158, 234, 0.6);
  bottom: 35px;
  margin-left: -445px;
  left: 50%;
  z-index: 100;
  position: absolute;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.area_box {
  width: 874px;
  height: 56px;
  background: linear-gradient(
    360deg,
    rgba(0, 45, 103, 0.6) 0%,
    rgba(5, 16, 42, 0.6) 100%
  );
  border: 1px solid rgba(27, 158, 234, 0.6);
  bottom: 100px;
  margin-left: -445px;
  left: 50%;
  z-index: 100;
  position: absolute;
  display: flex;
  align-items: center;
  display: none;
}
.area_box.show {
  display: block;
}
.area_list {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  padding: 5px 0;
  height: 100%;
  box-sizing: border-box;
}
.area_list .area_item {
  flex: 1;
  height: 100%;
  line-height: 44px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.area_list .area_item:hover {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
}
.roadIn_c_b_label {
  position: absolute;
  left: 16px;
  top: 0;
  line-height: 56px;
  font-size: 20px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
}
.roadIn_c_b_content {
  position: absolute;
  left: 144px;
  right: 20px;
  top: 10px;
  overflow: hidden;
  font-size: 14px;
  font-family: SourceHanSansSC-Normal, SourceHanSansSC;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.6);
  line-height: 18px;
}
.roadIn_c_b_content ul.item{
  display: flex;
  align-items: center;
  margin:0;
}
.roadIn_c_b_content ul.item li{
  width: 240px;
}
.roadIn_c_b_content ul.item li .newItem_title{
  font-size: 16px;
  color: #4290BD;
}
.roadIn_c_t {
  position: absolute;
  z-index: 100;
  left: 492px;
  top: 115px;
  height: 140px;
  width: 119px;
  background-image: url("~@/assets/images/roadIn_c_t_bg.png");
  background-repeat: no-repeat;
  background-size: 119px 140px;
  background-position: 0 0;
}
.roadIn_c_t_box {
  padding-top: 14px;
  padding-left: 22px;
}
.roadIn_c_t_item {
  position: relative;
  height: 30px;
  line-height: 30px;
  padding-left: 22px;
  font-size: 14px;
  font-family: SourceHanSansSC-Medium, SourceHanSansSC;
  font-weight: 500;
  color: #bfe8ff;
}
.roadIn_c_t_item i {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
}
.circle_1 {
  background: #81ff5d;
}
.circle_2 {
  background: #ff6f6f;
}
.circle_3 {
  background: #f7b500;
}
.circle_4 {
  background: #3473fe;
}
.roadIn_l_t {
  position: absolute;
  z-index: 100;
  /* left: 12px; */
  left: -560px;
  top: 79px;
  height: 144px;
  width: 456px;
  background-image: url("~@/assets/images/roadIn_l_t_bg.png");
  background-repeat: no-repeat;
  background-size: 456px 144px;
  background-position: 0 0;
  transition: all 2s;
}
.roadIn_l_t_box {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 8px;
}
.tongji_item {
  width: 104px;
  height: 88px;
  background: linear-gradient(
    360deg,
    rgba(0, 45, 103, 0.6) 0%,
    rgba(5, 16, 42, 0.6) 100%
  );
  box-shadow: 0px 10px 20px 0px rgba(6, 164, 255, 0.2),
    0px -10px 20px 0px rgba(0, 162, 255, 0.2);
  border: 1px solid rgba(27, 158, 234, 0.6);
  margin: 0 auto;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.tongji_item_name {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 7px;
  font-size: 14px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 20px;
}
.tongji_item_num {
  width: 80px;
  height: 40px;
  line-height: 40px;
  position: relative;
  margin: 5px auto;
  font-size: 32px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
}
.d-roll-wrapper {
  margin: 0 auto;
}
.d-roll-item > .d-roll-bar > div {
  line-height: 40px !important;
}
.roadIn_l_c {
  position: absolute;
  z-index: 100;
  /* left: 12px; */
  top: 248px;
  transition: all 2s;
  height: 225px;
}
.roadIn_l_b {
  position: absolute;
  z-index: 100;
  /* left: 12px; */
  bottom: 30px;
  transition: all 2s;
  height: 554px;
}
.roadIn_l_b_body {
  margin-top: -1px;
  clear: both;
  width: 456px;
  height: 514px;
  position: relative;
  overflow: hidden;
}
.roadIn_l_b_body .common_table_head {
  height: 48px;
  line-height: 48px;
}
.roadIn_l_b_body .common_table_body {
  top: 48px;
}
.roadIn_l_b_body .common_table_body .common_row {
  line-height: 42px;
}
.roadIn_r_b_body .common_table_head {
  height: 48px;
  line-height: 48px;
}
.roadIn_r_b_body .common_table_body {
  top: 48px;
}
.roadIn_r_b_body .common_table_body .common_row {
  line-height: 30px;
}
.roadIn_l_c_body {
  margin-top: -1px;
  clear: both;
  width: 456px;
  height: 185px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 1);
  overflow: hidden;
}
>>> .el-table,
.el-table__expanded-cell {
  background: none;
}
>>> .el-table tr:hover {
  background: none;
}
>>> .el-table td,
.el-table th.is-leaf {
  border: none;
}
>>> .el-table,
>>> .el-table * {
  border: none;
}
>>> .el-table .cell {
  line-height: 28px;
  font-size: 12px;
  color: #84d2ff;
}

>>> .el-table th > .cell {
  line-height: 32px;
}
>>> .el-table .el-table__body tr:nth-child(even) {
  background: rgba(50, 63, 98, 0.2);
}
.roadIn_l_b_tb_h {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(
    90deg,
    rgba(0, 45, 103, 1) 0%,
    rgba(5, 16, 42, 1) 100%
  );
  border: 1px solid rgba(27, 158, 234, 1);
}
.roadIn_l_b_tb_b {
  position: absolute;
  left: 0;
  right: 0;
  top: 48px;
  bottom: 0;
  border: 1px solid #1b9eea;
  background: rgba(5, 16, 42, 0.8);
}
.marquee_item {
  padding-right: 40px;
  font-size: 13px;
}
.marquee_item:hover {
  color: #32ffb4;
  cursor: pointer;
}
.common_item_title {
  cursor: pointer;
}
.bmView div {
  background-color: transparent !important;
}
</style>

<style>
.el-table tbody tr:hover > td {
  background: rgba(50, 63, 98, 0.3) !important;
}
.el-table td,
.el-table th {
  padding: 0;
}

.el-table th,
.el-table tr {
  background: none;
}
.el-table::before {
  height: 0;
}

.el-table * {
  border: none !important;
}
.BMap_cpyCtrl {
  display: none;
}
.anchorBL {
  display: none;
}
</style>
